<template>
  <div class="ref">
    <!-- <div style="width:1200px;margin:50px auto;">
      <a-table :columns="columns" :data-source="data">
        <a-form-model
          slot="wage"
          slot-scope="text,record"
          :ref="record.index"
          :model="record"
          :rules="rules"
          style="width:300px;height:40px"
        >
          <a-form-model-item prop="wage">
            <a-input style="width:100%" v-model="record.wage" />
          </a-form-model-item>
        </a-form-model>
        <span slot="action">
          <a>详情</a>
        </span>
      </a-table>
    </div>

    <div style="margin-top:50px;overflow:hidden;text-align:center">
      <a-button @click="submit" size="large" type="primary">提交</a-button>
    </div>-->

    <div class="box-vw">
      <div class="img-container">
        <img
          src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg"
          alt
          style="width:100%"
        />
      </div>
    </div>
  </div>
</template>



  
     


<script>
import moment from "moment";
export default {
  name: "ref",
  data() {
    let validateWage = (rule, value, callback) => {
      let reg = /^[+]?[0-9]+(\.[0-9]{1,3})?$/;
      if (value === "") {
        callback(new Error("请输入值"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入整数或小数"));
      } else {
        callback();
      }
    };
    return {
      form: {},
      rules: {
        wage: [{ validator: validateWage, trigger: "change" }]
      },
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          align: "center",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "工资",
          dataIndex: "wage",
          width: "300px",
          key: "wage",
          align: "center",
          scopedSlots: { customRender: "wage" }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      data: [
        { key: 1, wage: "", name: "张三", index: "form1" },
        { key: 2, wage: "", name: "张三", index: "form2" },
        { key: 3, wage: "", name: "张三", index: "form3" }
      ]
    };
  },
  methods: {
    //   let arr =  [
    //         { 1: 5, 2: 6, 3: 3 }, { 1: 4, 2: 5, 3: 6 },{ 1: 7, 2: 11, 3: 9 }
    //       ];
    //   let keys = Object.keys(arr[0])
    //   let ob = {}
    //   keys.forEach((m) => {
    //     ob[`${m}`] = arr.map((v) => {
    //       return v[`${m}`]
    //     })
    //   })

    //   console.log(ob);

    moment,
    submit() {
      console.log(
        moment("2021-04-20T15:40:04.000+0800").format("YYYY-MM-DD HH:mm:ss")
      );

      let submitFlag = false;
      for (var key in this.$refs) {
        this.$refs[key].validate(valid => {
          if (valid) {
            // alert('submit!')
          } else {
            submitFlag = true;
            return false;
          }
        });
      }
      if (!submitFlag) {
        alert("submit!");
      }
    }
  },
  mounted() {
    this.createNotice({
      title: "提示",
      content: "服务器错误",
      duration: 5000
    });
  }
};
</script>

<style lang="scss" scoped>
.ref {
  width: 100%;
  padding: 0;
  margin: 0;
}
/* vw方案 */
.box-vw .img-container {
  width: 100%;
  // width: 100vw;
  height: 66.620879vw;
  // height:100px;
  padding-bottom: inherit;
}
/* padding方案 */
// .img-container {
//   width: 100%;
//   height: 0;
/* 图片的高宽比 */
//   padding-bottom: 66.620879%;
// }
</style>
